<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.hade {
				display: none;
			}
		</style>
		<script src="jquery-3.7.0.min.js"></script>
		<script type="text/javascript">
			var paints = [];
			$(function() {
				$.ajax({
					url: "data.json",
					type: "get",
					async: false,
					dataType: "json",
					success: function(data) {
						paints = data;
						display();
					}
				})
			})

			function display() {
				for (let i = 0; i < paints.length; i++) {
					var tr = $("<tr></tr>");
					tr.append(newTd(paints[i].id));
					tr.append(newTd(paints[i].name));
					tr.append(newTd(paints[i].dynasty));
					tr.append(newTd(paints[i].author));
					tr.append($("<button class='btn-edit'>编辑</button>"));
					tr.append($("<button class='btn-del'>删除</button>"));
					tr.append($("<button class='btn-save hade'>保存</button>"));
					tr.append($("<button class='btn-cancel hade'>取消</button>"));
					$(".data").append(tr);
					// 绑定编辑和删除事件监听器
					tr.find(".btn-edit").bind("click", edit);
					tr.find(".btn-del").bind("click", del);
				}
				$("input").attr("disabled", "");
			}

			function newTd(v) {
				var td = $("<td></td>");
				var input = $("<input type='text' size='8'/>")
				if (v) {
					input.val(v);
				}
				td.append(input);
				return td;
			}

			// 新增
			$(document).ready(function() {
				$(".btn-add").bind("click", function() {
					var tr = $("<tr></tr>");
					tr.append(newTd());
					tr.append(newTd());
					tr.append(newTd());
					tr.append(newTd());

					tr.append($("<button class='btn-save'>保存</button>"));
					tr.append($("<button class='btn-cancel'>取消</button>"));
					$(".data").append(tr);
					tr.find(".btn-save").bind("click", save_add);
					tr.find(".btn-cancel").bind("click", cancel_add);
					$(this).addClass("hade");
				});
			});
			// 编辑操作
			function edit() {
				// 1、隐藏编辑、删除按钮
				var this_tr = $(this).parent("tr");
				this_tr.find(".btn-edit,.btn-del").addClass("hade");
				// 2、显示保存、取消按钮
				this_tr.find(".btn-save,.btn-cancel").removeClass("hade");
				// 3、启用当前行所有输入框
				this_tr.find("input").attr("disabled", false);
				// 4、绑定保存、取消事件监听器
				this_tr.find(".btn-save").bind("click", save_edit);
				this_tr.find(".btn-cancel").bind("click", cancel_edit);
			}

			// 修改操作的保存
			function save_edit() {
				// 1、获取当前行的输入框内容
				var this_tr = $(this).parent("tr");
				var id = this_tr.find("td:eq(0) input").val();
				var name = this_tr.find("td:eq(1) input").val();
				var dynasty = this_tr.find("td:eq(2) input").val();
				var author = this_tr.find("td:eq(3) input").val();
				// 2、根据id修改data数组中的相应元素
				for (let i = 0; i < paints.length; i++) {
					if (paints[i].id == id) {
						paints[i].name = name;
						paints[i].dynasty = dynasty;
						paints[i].author = author;
						break;
					}
				}
				// 3、重新渲染页面
				$(".data").html("");
				display();
			}

			// 修改操作的取消
			function cancel_edit() {
				var this_tr = $(this).parent("tr");
				this_tr.find(".btn-save,.btn-cancel").addClass("hade");
				this_tr.find(".btn-edit,.btn-del").removeClass("hade");
				this_tr.find("input").attr("disabled", "");
			}

			// 删除操作
			function del() {
				if (confirm("是否要删除本行数据？")) {
					// 1、找到当前行元素及其下标
					var this_tr = $(this).parent("tr");
					var index = this_tr.index();
					// 2、删除data数组中对应的元素
					paints.splice(index - 1, 1);
					// 3、重新渲染页面
					$(".data").html("");
					display();
				}
			}

			// 新增操作的保存
			function save_add() {
				// 1、获取新增行的输入框内容
				var this_tr = $(this).parent("tr");
				var id = this_tr.find("td:eq(0) input").val();
				var name = this_tr.find("td:eq(1) input").val();
				var dynasty = this_tr.find("td:eq(2) input").val();
				var author = this_tr.find("td:eq(3) input").val();
				// 2、根据id判断新增数据是否与已有数据冲突
				for (let i = 0; i < paints.length; i++) {
					if (paints[i].id == id) {
						alert("该编号已存在！请重新输入。");
						return;
					}
				}
				// 3、将新增行的数据添加到data数组中
				var new_paint = {
					id: id,
					name: name,
					dynasty: dynasty,
					author: author
				};
				paints.push(new_paint);
				// 4、重新渲染页面
				$(".data").html("");
				display();
				$(".btn-add").removeClass("hade");
			}

			// 新增操作的取消
			function cancel_add() {
				var this_tr = $(this).parent("tr");
				this_tr.remove();
				$(".btn-add").removeClass("hade");
			}
		</script>
	</head>
	<body>
		<table>
			<tr id="head">
				<th>序号</th>
				<th>名称</th>
				<th>朝代</th>
				<th>作者</th>
				<th>操作</th>
			</tr>
			<tbody class="data"></tbody>
			<tr align="center">
				<td colspan="5">
					<button class="btn-add">增加</button>
				</td>
			</tr>
		</table>
	</body>
</html>
